<template>
    <div class="login-modal">
     <!-- 灰色遮罩层,点击关闭 -->
      <div class="mask" @click="changeisshowtclogin(false)"></div>
      <!-- 登录弹窗，遮罩和弹窗分开可以避免冒泡，如果一起则点击遮罩时，白色弹窗也会被点击 -->
      <div class="login-box">
        <!-- 关闭按钮 -->
        <img class="close" @click="changeisshowtclogin(false)" src="@/assets/img/close.png" alt="">
        <!-- 退出弹窗文案 -->
        <div class="body">
          <h3>确认退出吗？</h3>
          <div @click="tchs()" class="btn tc">退出</div>
          <div @click="changeisshowtclogin(false)" class="btn qx">取消</div>
        </div>
      </div>
    </div>
</template>
  
<script>
import {mapMutations,mapActions} from "vuex"
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'tclogin',
    data () {
      return {   
      }
    },
    methods:{
      ...mapMutations({
        // 控制退出窗口是否展示
        changeisshowtclogin:"tclogin/changeisshowtclogin",
        // 登录状态
        changeIsLogined:"loginzt/changeIsLogined"
      }),
      ...mapActions({
        // 登录提示语是否显示
        asyncChangeIsShowToast:"logintoast/asyncChangeIsShowToast",
      }),    
      // 点击退出钮执行这里的代码    
      tchs(){  
        localStorage.clear( );  
        // 另一种清除本地缓存的方式  
        window.sessionStorage.clear();      
        // 登录状态失效
        this.changeIsLogined(false);
        // 退出之后的逻辑
        // 1 同时关闭退出窗口
        this.changeisshowtclogin(false)
        // 2 提示登录成功
        this.asyncChangeIsShowToast({
          msg:"退出成功",
          type: "success"
        });       
      }
    }
}
</script>
   
<style lang = "less" scoped>

.login-modal{
    // 将登录页面优先级提前
    z-index:2;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    // 遮罩层
    .mask{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
    }
    // 弹窗
    .login-box{
        width: 555px;
        height: 423px;
        background: url("../assets/img/login-box-bg.png");
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;   //有宽度时可以让这个登录弹窗居中
        margin: auto;
        // 关闭按钮
        .close{
            position: absolute;
            right: 60px;
            top:18px;
            cursor: pointer;
        }
        // 弹窗文本
        
        // 弹窗主体
        .body{
            width: 360px;
            margin: 0 auto;
            margin-top:150px;
            h3{
                text-align: center;
                margin-bottom:100px;
            }
            .btn{
                padding: 10px;
                border: 1px solid black;
                cursor: pointer;
            }
            .tc{
                float: left;
                margin-left: 50px;
            }
            .qx{
                margin-right: 50px;
                float: right;
            }
        }
    }
}
</style>